<template>
  <div class="todo-item" :class="{ done: todo.completed }">
    <label>
      <input
        :checked="todo.completed"
        @click="$emit('change-state', $event)"
        type="checkbox"
      >
      {{ todo.content }}
      <span class="check-button"></span>
    </label>
  </div>
</template>

<script setup>

const props = defineProps({
  todo: {
    type: Object,
    // required: true
  }
})

const emits = defineEmits(['change-state'])
</script>

<style lang="scss" scoped>
.todo-item.done label {
  text-decoration: line-through;
  font-style: italic;
}
</style>